<template>
  <div class="login">
    <el-form :model="loginInfo" :rules="rules" ref="ruleForm" class="form" autocomplete="off">
      <el-form-item class="title">
        <h3>登录</h3>
      </el-form-item>
      <el-form-item label="" prop="username">
        <el-input v-model="loginInfo.username" placeholder="用户名" autoComplete="new-password">
          <svg-icon iconClass="username" class="el-input__icon el-icon-fake" slot="prefix"/>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input v-model="loginInfo.password" :type="pwdType" placeholder="密码" autoComplete="new-password">
          <svg-icon iconClass="sq-password" class="el-input__icon el-icon-fake" slot="prefix"/>
          <span @click="showPassword" class="el-input__icon el-icon-fake" slot="suffix" >
            <svg-icon :iconClass="eye" class="icon"/>
          </span>
        </el-input>
      </el-form-item>
      <el-form-item class="buttons">
        <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">{{submitBtnText}}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import SvgIcon from "../../components/SvgIcon/index.vue";
  import { mapActions } from 'vuex'
  import * as utils from '@/utils'

  export default {
    components: {SvgIcon},
    data() {
      return {
        loginInfo: {
          username: 'admin',
          password: '123456'
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ]
        },
        pwdType: 'password',
        eye: 'eye-closed',
        loading: false
      };
    },
    computed: {
      submitBtnText: function () {
        return this.loading ? '登录中...' : '登录'
      }
    },
    methods: {
      ...mapActions(['login']),
      showPassword: function () {
        if(this.pwdType === 'password'){
          this.pwdType = 'text'
          this.eye = 'eye-open'
        } else {
          this.pwdType = 'password'
          this.eye = 'eye-closed'
        }
      },
      submitForm(formName) {
        utils.saveLoginInfo(this.loginInfo.username, this.loginInfo.password)

        let vm = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            vm.loading = true
            vm.login(vm.loginInfo.username, vm.loginInfo.password)
              .then(()=>{
                vm.loading = false

                //跳转到首页
                this.$router.push('/')
            })
              .catch((error)=>{
              vm.loading = false
                console.log(`login>submitForm>${error}`)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .login{
    background-color: #2d3a4b;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .form{
      width: 400px;
      margin: 120px auto;
      padding: 35px 35px 15px 35px;

      .title{
        h3{
          margin: 0;
          color: #fff;
          text-align: center;
          font-weight: 700;
          font-size: 26px;
        }
      }

      .el-form-item {

        .el-input__inner {
          height: 54px;
          background-color: rgba(0, 0, 0, 0.1);
          color: #eee;
        }

        .el-icon-fake {
          height: 100%;
          width: 20px;

          .icon{
            font-size: 20px;
          }
        }

        &.buttons {
          text-align: center;
        }
      }
    }
  }
</style>
